<template>
    <div class="home">
        <nav-bar>
            <template v-slot:back>
                <img src="../../assets/imgs/badge.svg" alt="" style="width: 90%;">
            </template>
            <template v-slot:title>
                <h1 class="base-font-color">干部信息查询系统</h1>
            </template>
            <template v-slot:right>
                <button class="base-button" @click="focus">我的关注</button>
<!--                <button class="base-button" @click="modify">修改密码</button>-->
                <button class="base-button" @click="quit">注销</button>
            </template>
        </nav-bar>
        <tool-bar @normal-search="normal($event)" @advance-search="advance"></tool-bar>
        <div class="home-menu">
            <ul class="clearfix">
                <li @click="organize">
                    <div>
                        <div class="home-menu-item">
                            <div class="img organize"></div>
<!--                            <img src="../../assets/imgs/home/organize.svg" alt="">-->
                            <h1>组织机构</h1>
                        </div>
                    </div>
                </li>
                <li @click="category">
                    <div>
                        <div class="home-menu-item">
                            <div class="img category"></div>
<!--                            <img src="../../assets/imgs/home/category.svg" alt="">-->
                            <h1>常用分类</h1>
                        </div>
                    </div>
                </li>
                <li @click="chart">
                    <div>
                        <div class="home-menu-item">
                            <div class="img chart"></div>
<!--                            <img src="../../assets/imgs/home/chart.svg" alt="">-->
                            <h1>图表分析</h1>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    import {navbarMixin} from '../../mixins';
    import ToolBar from './child-comp/ToolBar';

    export default {
        name: 'Home',
        mixins: [navbarMixin],
        components: {
            ToolBar
        },
        methods: {
            focus() {
                this.$router.push({path: '/searchResult', query: {page: 1}});
            },
            // modify() {
            //     console.log('修改密码')
            // },
            quit() {
                this.$router.replace('/login');
            },
            normal(val) {
                this.$router.push({path: '/searchResult', query: {text: val}});
            },
            advance() {
                this.$router.push({path: '/advance'});
            },
            organize() {
                this.$router.push('/organize');
            },
            category() {
                this.$router.push('/category');
            },
            chart() {
                this.$router.push('/analysis');
            }
            /*cccc() {
                let cmr = window.plus.camera.getCamera() // 获取摄像头对象
                let res = cmr.supportedImageResolutions[0] // 字符串数组，摄像头支持的拍照分辨率
                let fmt = cmr.supportedImageFormats[0] // 字符串数组，摄像头支持的拍照文件格式
                console.log('Resolution :' + res + ', Format: ' + fmt)
                cmr.captureImage((path) => {
                        alert('调用成功: ' + path)
                    },
                    (error) => { // 拍照操作失败的回调函数
                        alert('调用失败: ' + error.message)
                    },
                    {resolution: res, format: fmt} // 摄像头拍照参数
                )
            }*/
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/scss/define";
    .home {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-image: url("../../assets/imgs/home/bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;


        .home-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100% - #{$navbar-height} - #{$toolbar-wrapper-height});

            ul {
                width: 100%;
                > li {
                    width: calc(100% / 3);
                    height: 0;
                    padding-top: calc(100% / 3);
                    position: relative;

                    > div {
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        padding: 30px;

                        > .home-menu-item {
                            width: 100%;
                            height: 100%;
                            background-color: rgba(255, 255, 255, .8);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            border-radius: $border-radius;
                            box-shadow: 0 0 5px 0 rgba(211, 211, 211, 0.5);

                            .img {
                                width: 100px;
                                height: 100px;
                                &.organize {
                                    @include mask-img('../../assets/imgs/home/organize.svg');
                                }

                                &.category {
                                    @include mask-img('../../assets/imgs/home/category.svg');
                                }

                                &.chart {
                                    @include mask-img('../../assets/imgs/home/chart.svg');
                                }
                            }
                            h1 {
                                color: $base-color;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
